<template>
  <div class="footers">
    <div class="footers-nav acea-row row-center row-middle">
      <div class="yejiao acea-row row-between" v-if="screenWidth>576">
        <div class="left-box" >
          <div class="caidan acea-row">
            <div class="caidan-item cursor" v-for="(item,index) in navlist" :key="index">
              <div class="fs-20 white mb-30" @click.stop="pathClick(item,index)">{{  item.name  }}</div>
              <div class="fs-18" v-for="(n,k) in item.children" :key="k" @click.stop="towClick(item,n)">{{ n.name }}</div>
            </div>
          </div>
          <div class="shouquan acea-row row-middle cursor">
            <div>广西自然博物馆版权所有、法律免责　桂ICP备15006716号-1 Powered By Nhmgx.cn 桂公网安备 45010202000256号</div>
            <div class="shiyeicon">
              <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/shiyeicon.png" alt="">
            </div>
          </div>
        </div>
        <div class="shuline"></div>
        <div class="right-box">
          <div class="meuntype cursor">
            <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/meuntype.png" alt="">
          </div>
          <div class="qrcode cursor">
            <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/qrcode.png" alt="">
          </div>
        </div>
      </div>

      <div class="footer-nav" v-else>
        <div class="contenbox">
          <div class="white acea-row row-center row-middle bor-foor" @click.stop="scrollToTop">
            <span class="fs-12">回到顶部</span>
            <i class="iconfont icon-arrow-top ml-10"></i>
          </div>
        </div>
        <div class="app-qrcode">
          <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/qrcode.png" alt="">
        </div>
        <div class="white fs-12" style="text-align: center;">官方微信</div>
        <div class="app-shiyeicon">
          <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/shiyeicon.png" alt="">
        </div>
        <div class="white fs-12" style="text-align: center;">广西自然博物馆版权所有、法律免责</div>
        <div class="white fs-12 mt-10" style="text-align: center;">桂ICP备15006716号-1 Powered By Nhmgx.cn</div>
        <div class="white fs-12 mt-10" style="text-align: center;">桂公网安备 45010202000256号</div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: "FooTers",
  props:["screenWidth"],
  data(){
    return {
      navlist:[],

    }
  },
  mounted() {
    this.getConfig();
  },
  methods:{
    towClick(item,child){
      this.$router.push({ path:`/about?id=${item.id}&tid=${child.id}` },()=>{}, ()=>{});
      this.meunitem = item;
      localStorage.setItem('meunitem',JSON.stringify(item))
      localStorage.setItem('childitem',JSON.stringify(child))
    },
    pathClick(item,index){
      if( index==0 ) return this.$router.push({ path:'/' },()=>{}, ()=>{})
      this.$router.push({ path:`/about?id=${item.id}&tid=${item.children[0].id}` })
        localStorage.setItem('meunitem',JSON.stringify(item))
        localStorage.setItem('childitem',JSON.stringify(item.children[0]))
    },
    scrollToTop(){
      this.$emit('stopTop')
    },
    getConfig(){
      let that = this;
      that._get('/api/portal/web/categroy/list',).then(res=>{
        console.log(res)
        this.navlist = res.data.data;
      })
    },
  }
}
</script>
<style scoped lang="scss">
  .footers{
    width: 100vw;
    height: 35.25rem;
    //background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/footers-bg.png");
    //background-image: 100% 100%;
    background: #1E5A54;

    .footers-nav{
      padding-top: 3.125rem;

      .yejiao{
        width: 104.375rem;
        height: 28.75rem;
        border-top: .0625rem solid #ffffff;
        padding-top: 3.125rem;

        .left-box{

          .caidan{
            color: #FFF6E5;
            height: 18.75rem;

            .caidan-item{
              line-height: 2.1875rem;
              width: 9.375rem;
            }
          }

          .shouquan{
            color: #ffffff;
            font-size: 1.125rem;
          }

          .shiyeicon{
            width: 3.125rem;
            height: 3.125rem;
          }
        }
        .shuline{
          width: .0625rem;
          height: 7.0625rem;
          background-color: #ffffff;
        }
        .right-box{
          width: 25rem;

          .meuntype{
            width: 19.8125rem;
            height: 6.625rem;
            margin: 0 auto;
          }

          .qrcode{
            width: 15.0625rem;
            height: 15.0625rem;
            margin: 3.125rem auto;
          }

        }
      }
    }

    .footer-nav{
      flex: 1;

      .contenbox{
        padding: 1.25rem;

        .bor-foor{
          border-bottom: .0625rem solid #ffffff;
          padding-bottom: 1.25rem;
        }
      }
      .app-qrcode{
        width: 5.375rem;
        height: 5.375rem;
        margin: 1.25rem auto .625rem auto;
      }
      .app-shiyeicon{
        width: 3.5rem;
        height: 3.5rem;
        margin: 1.25rem auto .625rem auto;
      }
    }

  }

  @media screen and (max-width: 36rem) {
    .footers{
      background: #1E5A54;
    }
  }

</style>